<!DOCTYPE html>
<html lang="zh-CN">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
	<title>Objective 跟 JavaScript互调</title>
</head>
	<style type="text/css">
		body{text-align:center} 
		.divStyle{
			margin:0 auto;      /* 居中 这个是必须的，，其它的属性非必须 */  
    		width:500px;        /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */   
    		text-align:left;  /* 文字等内容居中 */
		}
		.lblStyle{
			background-color: yellow;

		}
	</style>
<script type="text/javascript">
var wb; // 全局变量，用于调用原生或者注册js方法
/*
setupWebViewJavascriptBridge 是第三方框架桥接文件。复制就好

注意括号问题。
*/
	function setupWebViewJavascriptBridge(callback) {
		if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
		if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
		window.WVJBCallbacks = [callback];
		var WVJBIframe = document.createElement('iframe');
		WVJBIframe.style.display = 'none';
		WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
		document.documentElement.appendChild(WVJBIframe);
		setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
	}
	setupWebViewJavascriptBridge(function(bridge) {
		wb =  bridge;
		bridge.registerHandler('callJS', function(data, responseCallback) {
			document.getElementById('testID').innerHTML =  data.data
			responseCallback('js收到了');
		});
		
	});

	/*
	  JS调用Objective
	*/
	function sayHello() {
		document.getElementById('testID').innerHTML = 'Say hello'
	}
	/*
	  Objective调用JS的代码
	*/
	function Login() {
		var uName = document.getElementById('uName');
		var uPass = document.getElementById('uPass');
		var data = {"uName":uName.value,"uPass":uPass.value};
		 wb.callHandler('Login', data, function(response) {
    		document.getElementById('testID').innerHTML =  response.data
        });

	}

	function getJson(){
		try{
	        wb.callHandler('getJson', {"data":"赶紧给我数据"}, function(response) {
	        	document.getElementById('testID').innerHTML =  response.data
	        });
	    } catch(e){ alert(e); }
	}

/*
页面一加载就调用原生的代码，获取参数或者是数据，用于html页面的贤惠
*/
setTimeout(function(){
	getJson();
}, 500);


	</script>
<body>

	<div class="divStyle" >
		
		<label>You Name:</label>
		<input type="text" id="uName">
		<br>
		<br>
		<label>You Password:</label>
		<input type="text" id="uPass"><br>
		<br>
		<button onclick="Login()">登录</button>
	</div>
	<hr>
	<div class="divStyle">
		<label>结果显示:</label><br>
		<label class="lblStyle" id="testID">登录标示</label>
	</div>
</body>
</html>